<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/stu.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <div class="user">
        <h1>用户信息</h1>
    </div>
    <form>
        <p>
            Username :</br>
            <input type="text" name="username" class="frames">
        </p>
        <p>
            Password :</br>
            <input type="password" name="password" class="frames">
        </p>
        <p>
            Phone :</br>
            <input type="text" name="phone" class="frames">
        </p>
        <p>
            Age :</br>
            <input type="text" name="age" class="frames">
        </p>
        <p>
            Height :</br>
            <input type="text" name="height" class="frames">
        </p>
        <p>
            Weight :</br>
            <input type="text" name="weight" class="frames">
        </p>
        <p>
            Gender :</br>
            <input type="radio" name="gender" value="male">Male
            <input type="radio" name="gender" value="female">Female
        </p>
        <p>
            Hobby :</br>
            <input type="checkbox" name="hobby" value="Reading">Reading
            <input type="checkbox" name="hobby" value="Singing">Singing
            <input type="checkbox" name="hobby" value="Dancing">Dancing
            <input type="checkbox" name="hobby" value="Football">Football</br>
            <input type="checkbox" name="hobby" value="Basketball">Basketball
            <input type="checkbox" name="hobby" value="Games">Games
            <input type="checkbox" name="hobby" value="Drawing">Drawing
            <input type="checkbox" name="hobby" value="Swimming">Swimming
            <input type="checkbox" name="hobby" value="Yoga">Yoga
        </p>
        <p>
            <input type="button" value="更新信息" onclick="save()" class="update">
        </p>
    </form>
</body>
<script>
    //获取用户信息
    var username = $('[name=username]');
    var password = $('[name=password]');
    var phone = $('[name=phone]');
    var age = $('[name=age]');
    var height = $('[name=height]');
    var weight = $('[name=weight]');

    //将用户修改的信息保存起来
    function save(){
        var data = {
            username:username.val(),
            password:password.val(),
            phone:phone.val(),
            age:age.val(),
            height:height.val(),
            weight:weight.val(),
            //性别是input框里是radio类型的，并且是被选中的属性
            gender:$('input:radio:checked').val(),
            //爱好设置为空
            "hobby":[],  
        }
        //爱好是input框里是radio类型的，并且是被选中的属性
         $('input:checkbox:checked').val(function(index,value){
             //将这个值放入到爱好hobby中
            data.hobby.push(value);
         });
        console.log(data);

         //将保存的信息传回服务器
        $.post('/user', {
            changeStr: JSON.stringify(data)
        }).done(function (result) {
            console.log(result);
        });
    }

    //将用户信息回填到页面当中去
    $.get('/user',{id:'s1'}).done(function(result){
        username.val(result.username);
        password.val(result.password);
        phone.val(result.phone);
        age.val(result.age);
        height.val(result.height);
        weight.val(result.weight);
        //将数据中的性别，给上属性checked
        $('[value="'+result.gender+'"]').prop('checked',true);
        //map遍历数据中的hobby，取到里面的value，并给上属性checked
        $.map(result.hobby,function(value){
             $('[value="' + value + '"]').prop('checked', true);
        });
       
    });

</script>
</html>